<!DOCTYPE html>
<html>
    <head>
    <title>页面加载进度条</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>    
		* {
			margin:0px; 
			padding:0px
		}    
		.box {
			height:40px; 
			width:100%; 
			background:#ccc; 
			border:1px solid #ccc; 
			position:relative; 
			/*margin:100px auto;*/
		}    
		.box #div1 {
			height:100%; 
			width:0%; 
			background:green; 
		}    
		span {
			position:absolute; 
			top:0; 
			left:0; 
			line-height:40px; 
			width:100%; 
			height:100%; 
			text-align:center; 
			font-size:28px; 
			font-weight:bold; 
			color:#fff;
		}    
	</style> 
	<script>    
		window.onload=function(){    
		    var oDiv = document.getElementById('div1');    
		    var oTxt = document.getElementById('txt');    
		    var count = 0;    
		    var total = 77;    
		    for(var i=0;i<77;i++) {    
		        var oImg = new Image();    
		        oImg.src= 'http://www.zhinengshe.com/works/3525/img/'+i+'.jpg';    
		        oImg.onload=function(){    
		            count++;    
		            oDiv.style.width= Math.floor((count/total)*100) + '%';    
		            oTxt.innerHTML = Math.floor((count/total)*100) + '%';  
		     
		        };    
		    }    
		         
		             
		};    
	</script> 
    </head>
    <body>
        <div class="box">    
		    <div id="div1"></div>    
		    <span id="txt"></span>    
		</div>   
    </body>
</html>